<template>
	<view class="tabBar">
		<view class="cont">
			<block v-for="(item,index) in list" :key="index" class="cont-item">
				<view @click="switchTab(item.pagePath)"
					:class="{'search': item.search ? true : false, 'item': !item.search, 'on': selected === (config == 0 ? (index > 1 ? (index + 1) : index) : index) ? true : false, 'off': selected != index ? true : false}">
					<image :src="selected===(config == 0 ? (index > 1 ? (index + 1) : index) : index) ? item.selectedIconPath : item.iconPath"></image>
					<view :class="{'txt': true,'selectedColor': selected === (config == 0 ? (index > 1 ? (index + 1) : index) : index) ? true : false}">{{item.text}}</view>
				</view>
			</block>
		</view>
	</view>
</template>
<script>
	export default {
		props: {
			selected: Number
		},
		data() {
			return {
				config: 0,
				color: "#fff",
				selectedColor: "#6777FD",
				list: []
			}
		},
		created() {
			this.config = uni.getStorageSync('config') || 0
			if (this.config == 0) {
				this.list = [
					{
						"pagePath": "/pages/index/index",
						"iconPath": "/static/home_n_icon.png",
						"selectedIconPath": "/static/home_y_icon.png",
						"text": "首页"
					},
					{
						"pagePath": "/pages/connections/connections",
						"iconPath": "/static/connections_n_icon.png",
						"selectedIconPath": "/static/connections_y_icon.png",
						"text": "人脉"
					},
					{
						"pagePath": "/pages/hall/hall",
						"iconPath": "/static/hall_n_icon.png",
						"selectedIconPath": "/static/hall_y_icon.png",
						"text": "供需大厅"
					},
					{
						"pagePath": "/pages/my/my",
						"iconPath": "/static/my_n_icon.png",
						"selectedIconPath": "/static/my_y_icon.png",
						"text": "个人中心"
					}
				]
			}else {
				this.list = [
					{
						"pagePath": "/pages/index/index",
						"iconPath": "/static/home_n_icon.png",
						"selectedIconPath": "/static/home_y_icon.png",
						"text": "首页"
					},
					{
						"pagePath": "/pages/connections/connections",
						"iconPath": "/static/connections_n_icon.png",
						"selectedIconPath": "/static/connections_y_icon.png",
						"text": "人脉"
					},
					{
						"pagePath": "/pages/coures/coures",
						"iconPath": "/static/course_n_icon.png",
						"selectedIconPath": "/static/course_y_icon.png",
						"text": "课程"
					},
					{
						"pagePath": "/pages/hall/hall",
						"iconPath": "/static/hall_n_icon.png",
						"selectedIconPath": "/static/hall_y_icon.png",
						"text": "供需大厅"
					},
					{
						"pagePath": "/pages/my/my",
						"iconPath": "/static/my_n_icon.png",
						"selectedIconPath": "/static/my_y_icon.png",
						"text": "个人中心"
					}
				]
			}
		},
		methods: {
			switchTab(url) {
				uni.switchTab({
					url
				})
			}
		}
	}
</script>
<style lang="scss">
	.tabBar {
		z-index: 100;
		width: 100%;
		height: 120rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		font-size: 28rpx;
		background-color: #fff;
		color: #636363;
	}

	.cont {
		padding-bottom: 30rpx;
		display: flex;
		justify-content: space-around;
		border-top: 1px solid #ddd;

		.item {
			font-size: 24rpx;
			position: relative;
			width: 20%;
			padding-top: 15rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			background-color: #fff;
		}

		.item image:first-child {
			width: 43rpx !important;
			height: 43rpx !important;
			margin: auto
		}

		.item image:last-child {
			width: 41rpx !important;
			height: 43rpx !important;
			margin: auto
		}

		.txt {
			margin-top: 10rpx;
		}

		.on {
			position: relative;
		}

		.search {
			position: absolute;
			left: 50%;
			transform: translate(-50%, 0);
			top: -50rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
		}

		.search image {
			width: 100rpx !important;
			height: 100rpx !important;
			z-index: 2;
			border-radius: 100%;
		}

		.search .txt {
			margin-top: 26rpx;
		}

		.selectedColor {
			color: #1C41F1;
		}
	}
</style>